<template>
  <div>
    <el-card>
      <!-- class="project-list-container" -->
      <div>
        <div class="list-h">
          <el-button
            type="primary"
            @click="handleAdd"
            class="add-option"
            v-auth="`/system/organization--add`"
            >新增公司</el-button
          >
          <el-form
            :inline="true"
            class="demo-form-inline"
            :model="formInline"
            ref="formRef"
            @submit.prevent
          >
            <el-form-item label="公司名称" prop="companyNameLike">
              <el-input
                v-model.trim="formInline.companyNameLike"
                clearable
                class="width-custom120"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="handleReset">重置</el-button>
              <el-button type="primary" @click="handleSearch">查询</el-button>
            </el-form-item>
          </el-form>
        </div>

        <el-skeleton style="height: 50vh" :rows="8" :loading="loading" animated>
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            v-loading="loading"
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          >
            <template #empty>
              <el-empty :image-size="150" description="暂无数据"></el-empty>
            </template>
            <el-table-column
              type="index"
              label="序号"
              width="50"
            ></el-table-column>
            <el-table-column
              prop="companyName"
              label="公司名称"
            ></el-table-column>

            <el-table-column
              prop="createTime"
              label="创建时间"
              min-width="150"
            ></el-table-column>
            <el-table-column prop="companyDesc" label="备注"></el-table-column>
            <el-table-column label="操作" width="120" fixed="right">
              <template #default="{ row }">
                <el-button
                  type="text"
                  @click="handleEdit(row)"
                  v-auth="`/system/organization--edit`"
                  >编辑</el-button
                >
                <el-popconfirm
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定删除该条记录吗？"
                  @confirm="handleDelete(row)"
                >
                  <template #reference>
                    <el-button
                      type="text"
                      v-auth="`/system/organization--delete`"
                      >删除</el-button
                    >
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-skeleton>
      </div>
      <re-pagination
        :total="total"
        v-show="total > 0"
        v-model:page="formInline.pageNum"
        v-model:limit="formInline.pageSize"
        @pagination="handleSearch"
      />
    </el-card>
    <el-dialog
      :title="mode === 'add' ? '添加公司' : '编辑公司'"
      v-model="dialogFormVisible"
      destroy-on-close
      width="35vw"
    >
      <company-detail
        :mode="mode"
        :companyInfo="companyInfo"
        @emitSubmit="onEmitSubmit"
      />
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, ref, defineComponent } from "vue";
import { postSysCompanyList, postSysCompanyDelete } from "/@/api/organization";
import NotifMessage from "/@/utils/message/notification";
import RePagination from "/@/components/RePagination/index.vue";

import CompanyDetail from "./components/CompanyDetail.vue";

interface formInlineType {
  companyNameLike: string;
  pageSize: number;
  pageNum: number;
}

export default defineComponent({
  name: "UserManage",
  components: {
    CompanyDetail,
    RePagination
  },
  setup() {
    const formRef = ref<HTMLFormElement | null>(null) as any;
    let loading = ref<boolean>(false);
    let dialogFormVisible = ref<boolean>(false);
    let total = ref<number>(0);
    let formInline = reactive<formInlineType>({
      companyNameLike: "",
      pageSize: 10,
      pageNum: 1
    });
    let mode = ref<string>("add");
    let state = reactive({
      tableData: [],
      companyInfo: {}
    });

    // 请求公司列表表格数据
    async function getTableData(obj: object = {}) {
      // 真实请求待添加
      loading.value = true;
      try {
        const { code, data } = await postSysCompanyList(obj);
        if (code === 200) {
          state.tableData = data.list;
          total.value = data.rows;
        }
      } catch (err) {
        console.log(err);
      } finally {
        loading.value = false;
      }
    }
    // 打开添加人员弹窗
    const handleAdd = (): void => {
      dialogFormVisible.value = true;
    };

    // 操作
    const onEmitSubmit = (isSubmit: boolean) => {
      dialogFormVisible.value = false;
      if (isSubmit) {
        getTableData();
      }
    };

    // 清除表单，重置
    const handleReset = () => {
      formRef.value.resetFields();
    };

    // 根据条件进行搜索
    const handleSearch = (): void => {
      getTableData(formInline);
    };

    // 删除记录
    const handleDelete = async item => {
      try {
        const { code, message } = await postSysCompanyDelete({ id: item.id });
        if (code === 200) {
          NotifMessage.success(`${message}`);
          getTableData();
        } else {
          NotifMessage.error(`${message}`);
        }
      } catch (err) {
        console.log(err);
      }
    };

    const handleEdit = row => {
      dialogFormVisible.value = true;
      mode.value = "edit";
      state.companyInfo = row;
    };

    // 请求数据
    getTableData(formInline);
    return {
      loading,
      dialogFormVisible,
      formInline,
      formRef,
      mode,
      total,
      ...toRefs(state),
      handleAdd,
      handleReset,
      handleSearch,
      handleDelete,
      handleEdit,
      onEmitSubmit
    };
  }
});
</script>
